<template>
    <div class="container">
        <div class="login-container">
            <span class="logo-icon"></span>
        </div>
        <ul class="form-container">
            <li class="form-name">
                <span class="name-word">账户</span>
                <input type="text" class="name-ipt" placeholder="请输入账号" v-model="name" @keyup="remerber()">
            </li>
            <li class="form-pass">
                <span class="pass-word">密码</span>
                <input type="password" class="name-ipt" placeholder="请输入密码" v-model="psd" @keyup="remerber()">
            </li>
            <li class="form-check">
                <span :class="{'check-icon': true,'checked':isRem == true}" @click="remPsd"></span>
                <span>记住密码</span>
            </li>
        </ul>
        <div class="btn" @click="submitForm">
            登录
        </div>
    </div>
</template>
<script>
    import loginApi from '../../api/login.js';
    import { Toast } from 'mint-ui';
    export default {
        data () {
            return {
                name: '',
                psd: '',
                isRem: false
            }
        },
        created() {
            if (localStorage.getItem('dongHang_account')) {
                let obj = JSON.parse(localStorage.getItem('dongHang_account'));
                this.name = obj.name;
                this.psd = obj.psd;
            }
        },
        methods: {
            remPsd () {
                this.isRem = !this.isRem;
                if (this.isRem) {
                    let obj = {};
                    obj.name = this.name;
                    obj.psd = this.psd;
                    let str = JSON.stringify(obj);
                    localStorage.setItem('dongHang_account', str);
                } else {
                    localStorage.removeItem('dongHang_account');
                }
            },
            remerber() {
                if (this.isRem) {
                    let obj = {};
                    obj.name = this.name;
                    obj.psd = this.psd;
                    let str = JSON.stringify(obj);
                    localStorage.setItem('dongHang_account', str);
                }
            },
            submitForm () {
                if (!this.name || !this.psd) {
                    Toast({
                        message: '请填写完整信息',
                        duration: 2000
                    });
                } else {
                    loginApi.login(this.name, this.psd).then(res => {
                        if (res.code == 0) {
                            let obj = {};
                            let str;
                            obj.agentId = res.t.id; // 用户id
                            obj.pid = res.t.pid; // 金牌代理商的上级钻石代理的ID，钻石代理和超级节点、普通节点都没有上级，没有上级的为 0
                            obj.level = res.t.level; // 代理商角色：1:钻石 2:金牌 3:超级节点 4:普通节点
                            obj.company = res.t.company
                            str = JSON.stringify(obj);
                            localStorage.setItem('dongHang_data', str);
                            this.$router.push('/market')
                        } else {
                            Toast({
                                message: res.message,
                                duration: 2000
                            });
                        }
                    })
                }
            }
        }
    }
</script>
<style lang="less">
    .login-container {
        position: relative;
        height: 4.06rem;
        .logo-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1.92rem;
            height: 0.92rem;
            background-size: contain;
            background-image: url(../../assets/img/logo.png);
        }
    }
    .form-container {
        li {
            margin-left: 0.3rem;
            padding-right: 0.3rem;
            height: 1rem;
            border-bottom: 1px solid #cccccc;
        }
        span {
            float: left;
            font-size: 0.3rem;
            line-height: 1rem;
            color: #282828;
        }
        input {
            height: 1rem;
            width: 5rem;
            float: right;
            border: 0;
            outline: none;
            font-size: 0.3rem;
            color: #282828;
            text-align: right;
            &::placeholder {
                color: #707070;
            }
        }
        .form-check {
            border-bottom:0;
            span {
                float: left;
            }
            .check-icon {
                margin-top: 0.35rem;
                margin-right: 0.2rem;
                width: 0.30rem;
                height: 0.30rem;
                background-color: #fff;
                border: 1px solid #ccc;
            }
            .checked {
                background-size: contain;
                border: 1px solid #29abae;
                background-color: #29abae;
                background-image: url(../../assets/img/check-icon.png)
            }
        } 
    }
    .btn {
        margin: 0.50rem auto 0;
        width: 5rem;
        height: 0.8rem;
        font-size: 0.32rem;
        text-align: center;
        line-height: 0.80rem;
        color: #fff;
        background-color: #29abae;
        border-radius: 0.35rem;
    }
</style>
